<template>
	<view class="message-packbox fixed" :style="{top: show ? commonNavHeight : '-280rpx'}">
		<view class="notify-view absolute" :class="show ? 'notify-show' : ''" @click="gooDetailPageFun(systemNoticeData)" v-if="isShowNoticing">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" class="notify-light-border absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/message-light.png`" mode=""></image>
			<view class="notify-view-content relative">
				<view class="notify-view-name relative flex-justify-content-between flex-align-items-center">
					<view class="title relative" v-if="systemNoticeData && systemNoticeData.title">
						<view class="text truncate">{{ systemNoticeData.title }}</view>
						<view class="absolute circle-tip"></view>
					</view>
				</view>
				
				<view class="notify-view-txt relative truncate" v-html="systemNoticeData.content" v-if="systemNoticeData && systemNoticeData.content">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store';
	
	export default {
		name: 'comNotify',
		props: {
			
			systemNoticeData: {
				type: Object,
				default: () => {}
			},
			value: {
				type: Boolean,
				default: () => false
			},
			
		},
		data() {
			return {
				isShowNoticing: true
			};
		},
		
		computed: {
			
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			show: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
			
		},
		methods: {
			gooDetailPageFun(item) {
				setTimeout(() => {
					this.isShowNoticing = false;
				}, 800);
				
				uni.navigateTo({
					url: `/secondary/notifyDetailPage/notifyDetailPage?id=${item.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-packbox {
		z-index: 100000100;
		width: 100%;
		height: 318rpx;
		overflow: hidden;
		left: 0;
		right: 0;
		margin: auto;
		.notify-view {
			// left: 10rpx;
			// top: -312rpx;
			width: 100%;
			height: 206rpx;
			transition: top 1.4s;
			.notify-view-content {
				left: 0;
				top: 32rpx;
				width: 100%;
				height: 206rpx;
				padding: 24rpx 40rpx;
				.notify-view-name {
					font-size: 34rpx;
					color: #63FFF7;
					.title {
						max-width: 552rpx;
						height: 38rpx;
						line-height: 38rpx;
						.text {
							width: 100%;
							color: #63FFF7;
						}
						.circle-tip {
							background: #63FFF7;
							border-radius: 100%;
							width: 18rpx;
							height: 18rpx;
							top: 0;
							bottom: 0;
							right: -30rpx;
							margin: auto;
						}
					}
				}
				.notify-view-txt {
					box-sizing: border-box;
					text-align: justify;
					font-size: 26rpx;
					color: #B2DCFF;
					margin-top: 20rpx;
					padding-top: 20rpx;
					height: 80rpx;
					line-height: 30rpx;
					border-top: 2rpx solid #99B6D9;
				}
			}
			&.notify-show {
				top: 10rpx;
			}
		}
		.notify-light-border {
			width: 100%;
			height: 206rpx;
		}
	}
</style>